@layer utilities {
    .glass-effect {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.7);
    }
    .weather-card {
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 1.5rem;
        padding: 1.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .weather-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    }
    .scale-hover {
        transition: transform 0.2s ease;
    }
    .scale-hover:hover {
        transform: scale(1.05);
    }
    .animated-bg {
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
    }
    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    .sun-path {
        position: relative;
        height: 100px;
        width: 100%;
    }
    .sun {
        position: absolute;
        width: 24px;
        height: 24px;
        background: #FFD700;
        border-radius: 50%;
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.7);
        transition: left 1s ease, bottom 1s ease;
    }
    .moon {
        position: absolute;
        width: 24px;
        height: 24px;
        background: #F0F0F0;
        border-radius: 50%;
        box-shadow: 0 0 20px 5px rgba(240, 240, 240, 0.7);
        transition: left 1s ease, bottom 1s ease;
    }
    .night-mode {
        background-color: #0F172A;
        color: #F8FAFC;
    }
    .night-mode .weather-card {
        background-color: rgba(15, 23, 42, 0.7);
        backdrop-filter: blur(10px);
    }
    .night-mode .glass-effect {
        background-color: rgba(15, 23, 42, 0.7);
        backdrop-filter: blur(10px);
    }
    .night-mode .bg-blue-50 {
        background-color: rgba(59, 130, 246, 0.1);
    }
    .night-mode .bg-orange-50 {
        background-color: rgba(249, 115, 22, 0.1);
    }
    .night-mode .bg-red-50 {
        background-color: rgba(239, 68, 68, 0.1);
    }
    .night-mode .bg-success/20 {
        background-color: rgba(16, 185, 129, 0.2);
    }
    .night-mode .bg-primary/10 {
        background-color: rgba(59, 130, 246, 0.1);
    }
    .night-mode .text-neutral-dark {
        color: #F8FAFC;
    }
    .night-mode .text-gray-600 {
        color: #94A3B8;
    }
    .night-mode .text-gray-500 {
        color: #94A3B8;
    }
    .night-mode .bg-primary/20 {
        background-color: rgba(59, 130, 246, 0.2);
    }
}